<section class="main-container">
  <div class="row">
    <free-panel fGrid="8">
      <f-header>
        <h4>{{'MAIN.TITLE' | translate}}</h4>
      </f-header>
      <div [innerHTML]="'MAIN.INTRODUCTION' | translate"></div>
      <p>
        <b>{{'MAIN.CURRENT-VERSION' | translate}}：</b>  <img src="https://img.shields.io/npm/v/freeng.svg">
      </p>
      <div [innerHTML]="'MAIN.DECLARATION' | translate"></div>
      <p style="padding-top: 10px;">
        <iframe frameborder="0" scrolling="0" width="160px" height="30px"
          src="https://ghbtns.com/github-btn.html?user=IronPans&repo=freeng&type=star&count=true&size=large">
        </iframe>
      </p>
    </free-panel>

    <free-panel fGrid="4">
      <f-header>
        <h4>{{'MAIN.ABOUT' | translate}}</h4>
      </f-header>
      <p>
        <span><i class="fa fa-user"></i> {{'AUTHOR.NAME' | translate}}：</span>
        <a href="http://ghmagical.com" target="_blank">TG</a>
      </p>
      <p>
        <span><i class="fa fa-flag"></i> {{'BLOG' | translate}}：</span>
        <a href="http://ghmagical.com" target="_blank">http://ghmagical.com</a>
      </p>
      <p>
        <span><i class="fa fa-qq"></i> QQ({{'MAIN.GROUP' | translate}})：</span> 540629196
      </p>
      <p style="margin-top: 20px">
        <a href="https://github.com/IronPans/freeng" fButton target="_blank">
          Github
        </a>
        <a href="http://git.oschina.net/crazyTG/freeng" fButton target="_blank">
          Gitee
        </a>
      </p>
    </free-panel>

    <free-panel fGrid="4">
      <f-header>
        <h4>{{'MAIN.FEATURE.TITLE' | translate}}</h4>
      </f-header>
     <div [innerHTML]="'MAIN.FEATURE.INTRO' | translate"></div>
    </free-panel>

    <free-panel fGrid="4">
      <f-header>
        <h4>{{'DEPENDENCE' | translate}}</h4>
      </f-header>
      <img src="assets/images/angular.svg" alt="" width="80">
    </free-panel>

    <free-panel fGrid="4">
      <f-header>
        <h4>{{'CHANGE-LOG' | translate}}
          <a routerLink="/main/changelog" style="padding-left: 20px;text-decoration: underline">more</a></h4>
      </f-header>
      <free-accordion-group [closeOthers]="true">
        <free-accordion class="let-menu-item" header="v0.5.2" [selected]="true">
          <h5 class="subtitle">Features</h5>
          <ul class="free-ul-padding" [innerHTML]="'UPDATE.v052.FEATURE' | translate"></ul>
          <h5 class="subtitle">Bug Fixes</h5>
          <ul class="free-ul-padding" [innerHTML]="'UPDATE.v052.BUG' | translate"></ul>
        </free-accordion>
        <free-accordion class="let-menu-item" header="v0.5.1">
          <h5 class="subtitle">Bug Fixes</h5>
          <ul class="free-ul-padding" [innerHTML]="'UPDATE.v051.BUG' | translate"></ul>
        </free-accordion>
        <free-accordion class="let-menu-item" header="v0.5.0">
          <h5 class="subtitle">CHANGES</h5>
          <ul class="free-ul-padding" [innerHTML]="'UPDATE.v050.CHANGES' | translate"></ul>
          <h5 class="subtitle">Refactor</h5>
          <ul class="free-ul-padding" [innerHTML]="'UPDATE.v050.REFACTOR' | translate"></ul>
        </free-accordion>
        <free-accordion class="let-menu-item" header="v0.4.6">
          <h5 class="subtitle">Bug Fixes</h5>
          <ul class="free-ul-padding" [innerHTML]="'UPDATE.v046.BUG' | translate"></ul>
        </free-accordion>
        <free-accordion class="let-menu-item" header="v0.4.5">
          <h5 class="subtitle">Bug Fixes</h5>
          <ul class="free-ul-padding" [innerHTML]="'UPDATE.v045.BUG' | translate"></ul>
        </free-accordion>
      </free-accordion-group>
    </free-panel>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</section>
